<template>
    <a-card title="自动回复管理" :bordered="false">
        <!-- Card Header -->
        <template slot="extra">
            <a-form-model layout="inline" @submit.prevent="searchSubmit">
                <a-form-model-item>
                    <a-input v-model="searchForm.keyword"
                             :allowClear="$store.getters.allowClear"
                             placeholder="回复关键字"></a-input>
                </a-form-model-item>
                <a-form-model-item>
                    <a-select  :placeholder="'匹配方式'" allowClear showSearch v-model="searchForm.matchType"
                              option-filter-prop="children"
                              style="width: 150px">
                        <a-select-option v-for="(item, index) in WxmpReplyMatchTypeOPT" :key="index" :value="item.value">{{
                            item.label }}
                        </a-select-option>
                    </a-select>

                </a-form-model-item>



                <a-form-model-item>
                    <a-select  :placeholder="'回复类型'" allowClear showSearch v-model="searchForm.contentType"
                              option-filter-prop="children"
                              style="width: 150px">
                        <a-select-option v-for="(item, index) in WxmpReplyContentTypeOPT" :key="index" :value="item.value">{{
                            item.label }}
                        </a-select-option>
                    </a-select>

                </a-form-model-item>

                <a-form-model-item>
                    <a-select    placeholder="触发事件" allowClear showSearch v-model="searchForm.event"
                              option-filter-prop="children"  style="width: 150px">
                        <a-select-option v-for="(item, index) in WxmpEventsOPT" :key="index" :value="item.value">{{
                            item.label }}
                        </a-select-option>

                    </a-select>

                </a-form-model-item>



                <a-form-model-item>
                    <a-button icon="search" type="primary" html-type="submit">搜索</a-button>
                </a-form-model-item>
                <a-form-model-item>
                    <a-button icon="plus" type="danger" @click="openEdit()">新建</a-button>
                </a-form-model-item>
            </a-form-model>
        </template>

        <!-- 表格开始 -->
        <a-table :columns="columns" :rowKey="record => record.id"
                 :dataSource="dataSource"
                 :pagination="pagination"
                 :loading="loading"
                 @change="handleTableChange" bordered
        >
            <!--匹配类型插槽 -->
            <template slot="matchType" slot-scope="text,record">
                {{ $exMod.findDict(WxmpReplyMatchTypeOPT, text) }}
            </template>
            <!-- 回复类型插槽 -->
            <template slot="contentType" slot-scope="text,record">
                {{ $exMod.findDict(WxmpReplyContentTypeOPT, text) }}
            </template>
            <!-- 绑定事件 -->
            <template slot="event" slot-scope="text,record">
                {{ $exMod.findDict(WxmpEventsOPT, text) }}
            </template>


            <!-- 操作插槽 -->
            <template slot="operation" slot-scope="text, record">
                <a @click="openEdit(record)">编辑</a>
                <a-divider type="vertical"/>
                <a-popconfirm :title="`确定要删除这个回复关键字吗?`"
                              @confirm="(e) => removeReply(record.id)"><a>删除</a>
                </a-popconfirm>
            </template>
        </a-table>
        <EditBox v-if="editShow" @closeFun="closeEdit" :editRecord="editRecord"/>
    </a-card>
</template>
<script>
    import {pagination, replyTable} from '../public/colums.js';
    import {replyList, replyDelete} from '../public/http.js';
    import {dictLoad} from '../../../../util/internal.api';

    export default {
        components: {
            EditBox: () => import('./edit.vue'),
        },
        data() {
            return {
                editShow: false, //打开编辑器
                editRecord: {}, //正在编辑的记录
                dataSource: [],
                pagination: {
                    ...pagination
                }, //复制预设的分页参数
                loading: false, //表格loading
                columns: replyTable, //表头管理
                searchForm: {
                    keyword: null,
                    matchType: null,
                    contentType:null,

                },
                WxmpReplyMatchTypeOPT: [],
                WxmpReplyContentTypeOPT: [],
                WxmpEventsOPT:[],

            };
        },
        methods: {
            //1.0 获取表格数据
            getTableList() {
                this.loading = true;
                let searchData = this.$exMod.filterObjEmpty(this.searchForm); //删除对象中的空值
                replyList(this.pagination, searchData).then(res => {
                    this.loading = false;
                    if (res.code === 0) {
                        this.dataSource = res.data.result; //表格数据
                        this.pagination.total = res.data.total; //总记录条数
                    }
                });
            },
            //1.2翻页监听
            handleTableChange(pagination) {
                this.pagination.current = pagination.current;
                this.pagination.pageSize = pagination.pageSize;
                this.getTableList();
            },
            //2.0打开编辑器
            openEdit(obj = {}) {
                this.editRecord = obj;
                this.editShow = true;
            },
            //2.1 关闭编辑器
            closeEdit(e) {
                this.editShow = false;
                if (e.render) {
                    this.getTableList();
                }
            },
            //3.0 搜索提交
            searchSubmit() {
                this.pagination.current = 1;
                this.getTableList();
            },

            removeReply(id) {
                replyDelete(id).then(res => {
                    this.$exMod.ajaxMessage(res);
                    if (res.code === 0) {
                        this.getTableList();
                    }
                })

            },


            //4.0删除分组
            //数据初始化
            async init() {



                await dictLoad('WxmpReplyMatchType').then(res => (this.WxmpReplyMatchTypeOPT = res));
                await dictLoad('WxmpReplyContentType').then(res => (this.WxmpReplyContentTypeOPT = res));
                await dictLoad('WxmpEvents').then(res => (this.WxmpEventsOPT = res));
                this.getTableList();
            }
        },
        created() {
            this.init();
        }
    };
</script>
